<template>
    <Modal
            width="800"
            v-model="visible"
            :title="title"
            :key="key"
    >
        <div style="margin-left: 40px;margin-bottom: 20px">
            <Button type="primary" icon="ios-add" @click="add">
                新增
            </Button>
            <Button type="primary" icon="ios-remove" @click="del" style="margin-left: 5px">
                删除
            </Button>
        </div>
        <div style="width:720px; margin: 0 auto;">
            <Spin size="large" fix v-if="Loading"></Spin>
            <div v-for="(value, key) in formValidate" :key="key">
                <div v-for="(item, index) in value" :key="index">
                    <Form :ref="'formValidate' + key + index" :model="item" :rules="ruleValidate" :label-width="100"
                          inline>
                        <FormItem label="" :label-width="20">
                            <Checkbox v-model="item.checked">
                            </Checkbox>
                        </FormItem>
                        <FormItem label="属性名称" prop="rulePropertyId">
                            <Select v-model="item.rulePropertyId" placeholder="请选择属性名称" style="width: 180px">
                                <Option v-for="property in propertyInfoList" :value="property.id" :key="property.id">
                                    {{property.rulePropertyName}}{{property.rulePropertyIdentify}}
                                </Option>
                            </Select>
                        </FormItem>
                        <FormItem label="属性值" prop="rulePropertyValue">
                            <Input v-model="item.rulePropertyValue" placeholder="请输入属性值"></Input>
                        </FormItem>
                    </Form>
                </div>
            </div>
        </div>
        <div slot="footer">
            <Button @click="cancel">取消</Button>
            <template v-if="!disableSubmit">
                <Button type="primary" @click="ok">确定</Button>
            </template>
        </div>
    </Modal>
</template>
<script>
    import {getAction, postAction} from '@/api/request'

    export default {
        data() {
            return {
                formValidate: [
                    [
                        {
                            rulePropertyId: '',
                            rulePropertyValue: '',
                            checked: false,
                        }
                    ],
                ],
                id: "",
                title: "",
                Loading: true,
                visible: false,
                disableSubmit: false,
                key: "",
                propertyInfoList: {},
                ruleValidate: {
                    rulePropertyId: [
                        {required: true, message: '请选择属性名称', trigger: 'blur'}
                    ],
                    rulePropertyValue: [
                        {required: true, message: '请输入属性值', trigger: 'blur'}
                    ]
                },
                url: {
                    addProperty: "/api/ac/subsistence/RuleInforService/insertProperty",
                    selectPropertyInfoList: "/api/ac/subsistence/RuleInforService/selectPropertyInfoList",
                    selectPropertyList: "/api/ac/subsistence/RuleInforService/selectPropertyList",
                }
            }
        },
        methods: {
            ok() {
                this.handleSubmit();
            },
            del() {
                this.formValidate.forEach((item, index) => {
                    if (item[0].checked) {
                        this.formValidate.splice(index, 1)
                    }
                });
            },
            add() {
                var validate = new Object();
                validate.rulePropertyId = "";
                validate.rulePropertyValue = "";
                validate.checked = false;
                var array = new Array();
                array.push(validate)
                this.formValidate.push(array);
            },
            edit(row) {
                this.visible = true;
                this.formValidate.length = 0;
                this.id = row.id;
                this.selectPropertyInfoList();
                this.selectPropertyList(row.id);
            },
            cancel() {
                this.visible = false;
            },

            selectPropertyInfoList() {
                var that = this;
                that.Loading = true;
                var url = that.url.selectPropertyInfoList;
                getAction(url, {}).then((res) => {
                    if (res.data.errcode != 0) {
                        that.$Message.error(res.data.errmsg);
                    } else {
                        that.propertyInfoList = res.data.data;
                    }
                }).finally(() => {
                    that.Loading = false;
                });
            },

            handleSubmit() {
                let arr = [];
                var rulePropertyRelVoList = new Array();
                var rulePropertyVo = new Object();
                rulePropertyVo.ruleId = this.id;
                this.formValidate.forEach((item, index) => {
                    var rulePropertyRelVo = new Object();
                    rulePropertyRelVo.rulePropertyId = item[0].rulePropertyId;
                    rulePropertyRelVo.rulePropertyValue = item[0].rulePropertyValue;
                    rulePropertyRelVoList.push(rulePropertyRelVo);
                    item.forEach((data, key) => {
                        let form = 'formValidate' + index + key;
                        this.$refs[form][0].validate((valid) => {
                            if (valid) {
                                arr.push(true);
                            } else {
                                arr.push(false);
                            }
                        });
                    });
                });
                let flag = arr.every((item) => {
                    return item === true;
                });
                if (flag) {
                    rulePropertyVo.rulePropertyRelBeanList = rulePropertyRelVoList;
                    this.submitFrom(rulePropertyVo);
                }
            },

            submitFrom(rulePropertyVo) {
                var that = this;
                that.Loading = true;
                var url = that.url.addProperty;
                postAction(url, rulePropertyVo).then((res) => {
                    if (res.data.errcode != 0) {
                        this.$Message.error(res.data.errmsg);
                    } else {
                        this.$emit('ok');
                        this.visible = false;
                    }
                }).finally(() => {
                    that.Loading = false;
                });
            },

            handleReset() {
                this.formValidate.forEach((item, index) => {
                    item.forEach((data, key) => {
                        let form = 'formValidate' + index + key;
                        this.$refs[form][0].resetFields();
                    })
                });
            },
            selectPropertyList(id) {
                var that = this;
                var url = this.url.selectPropertyList;
                postAction(url, {id: id}).then((res) => {
                    if (res.data.errcode != 0) {
                        this.$Message.error(res.data.errmsg);
                    } else {
                        var list = res.data.data;
                        that.formValidate.length = 0;
                        for (var i in list) {
                            list[i].checked = false;
                            var array = new Array();
                            array.push(list[i])
                            that.formValidate.push(array);
                        }
                    }
                }).finally(() => {
                    that.Loading = false;
                });
            }
        }
    }
</script>
